<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/content.css">
    <link rel="stylesheet" href="css/skin/skin_0.css" id="sheet-color">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="css/thickbox.css">

    <script src="js/jquery.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/index.js"></script>
    <script src="js/detail.js"></script>

    <!--引入放大镜插件     -->
    <script src="js/jquery.jqzoom.js"></script>
    <script src="js/use_jqzoom.js"></script>
    <!--引入遮挡层-->
    <script src="js/jquery.thickbox.js"></script>


</head>
<body>
<header id="header">
    <div id="top">
        <a id="logo"><img src="images/logo.gif" alt=""></a>
        <div id="search"><input type="text" value="请输入商品名称"></div>
        <div id="nav-color">
            <ul id="skin">
                <li id="skin_0" title="灰色" class="selected">灰色</li>
                <li id="skin_1" title="淡绿色">淡绿色</li>
                <li id="skin_2" title="橙色">橙色</li>
                <li id="skin_3" title="天蓝色">天蓝色</li>
                <li id="skin_4" title="红色">红色</li>
                <li id="skin_5" title="紫色">紫色</li>
            </ul>
        </div>
    </div>
    <div id="nav">
        <ul>
            <li class="title"><a href="#">首页</a></li>
            <li class="title">
                <a href="#">品牌</a>
                <div class="hide-nav" >
                    <dl class="fore">
                        <dt>
                            <a href="#nogo" class="band">品牌：</a>
                        </dt>
                        <dd>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em ><a href="#nogo">安踏</a></em>
                            <em ><a href="#nogo">奥康</a></em>
                            <em ><a href="#nogo">骆驼</a></em>
                            <em ><a href="#nogo">特步</a></em>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em class="noborder"><a href="#nogo">特步</a></em>
                        </dd>
                    </dl>
                    <dl >
                        <dt>
                            <a href="#nogo" class="band">品牌：</a>
                        </dt>
                        <dd>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em ><a href="#nogo">安踏</a></em>
                            <em ><a href="#nogo">奥康</a></em>
                            <em ><a href="#nogo">骆驼</a></em>
                            <em ><a href="#nogo">特步</a></em>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em class="noborder"><a href="#nogo">特步</a></em>
                        </dd>
                    </dl>

                </div>
            </li>
            <li class="title">
                <a href="#">女装</a>
                <div class="hide-nav" >
                    <dl class="fore">
                        <dt>
                            <a href="#nogo" class="band">品牌：</a>
                        </dt>
                        <dd>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em ><a href="#nogo">安踏</a></em>
                            <em ><a href="#nogo">奥康</a></em>
                            <em ><a href="#nogo">骆驼</a></em>
                            <em ><a href="#nogo">特步</a></em>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em class="noborder"><a href="#nogo">特步</a></em>
                        </dd>
                    </dl>
                    <dl >
                        <dt>
                            <a href="#nogo" class="band">品牌：</a>
                        </dt>
                        <dd>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em ><a href="#nogo">安踏</a></em>
                            <em ><a href="#nogo">奥康</a></em>
                            <em ><a href="#nogo">骆驼</a></em>
                            <em ><a href="#nogo">特步</a></em>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em class="noborder"><a href="#nogo">特步</a></em>
                        </dd>
                    </dl>

                </div>
            </li>
            <li class="title">
                <a href="#">男装</a>
                <div class="hide-nav" >
                    <dl class="fore">
                        <dt>
                            <a href="#nogo" class="band">品牌：</a>
                        </dt>
                        <dd>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em ><a href="#nogo">安踏</a></em>
                            <em ><a href="#nogo">奥康</a></em>
                            <em ><a href="#nogo">骆驼</a></em>
                            <em ><a href="#nogo">特步</a></em>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em class="noborder"><a href="#nogo">特步</a></em>
                        </dd>
                    </dl>
                    <dl >
                        <dt>
                            <a href="#nogo" class="band">品牌：</a>
                        </dt>
                        <dd>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em ><a href="#nogo">安踏</a></em>
                            <em ><a href="#nogo">奥康</a></em>
                            <em ><a href="#nogo">骆驼</a></em>
                            <em ><a href="#nogo">特步</a></em>
                            <em ><a href="#nogo">耐克</a></em>
                            <em ><a href="#nogo">阿迪达斯</a></em>
                            <em ><a href="#nogo">达芙妮</a></em>
                            <em ><a href="#nogo">李宁</a></em>
                            <em class="noborder"><a href="#nogo">特步</a></em>
                        </dd>
                    </dl>

                </div>
            </li >
            <li class="title"><a href="#">鞋包配饰</a></li>
        </ul>
    </div>
</header>
<div id="content">
    <div id="content-left">
        <div id="content-title"><h2>商品分类</h2></div>
        <div id="content-left-list">

            <h3>推荐品牌</h3>
            <ul>
                <li><a href="###" >耐克</a></li>
                <li><a href="###" class="promoted">阿迪达斯 <span></span></a></li>
                <li><a href="###" >达芙妮</a></li>
                <li><a href="###" >李宁</a></li>
                <li><a href="###" >安踏</a></li>
                <li><a href="###" >奥康</a></li>
                <li><a href="###" class="promoted">骆驼 <span></span></a></li>
                <li><a href="###" >特步</a></li>
            </ul>
            <h3>女装</h3>
            <ul>
                <li><a href="###" >呢大衣</a></li>
                <li><a href="###" >T恤</a></li>
                <li><a href="###" >羽绒</a></li>
                <li><a href="###" >衬衫</a></li>
                <li><a href="###" >羊绒衫</a></li>
                <li><a href="###" >针织</a></li>
                <li><a href="###" >连衣裙</a></li>
                <li><a href="###" >皮外套</a></li>
            </ul>
            <h3>男装</h3>
            <ul>
                <li><a href="###" >衬衫</a></li>
                <li><a href="###" >T恤衫</a></li>
                <li><a href="###" >夹克</a></li>
                <li><a href="###" >大皮衣</a></li>
                <li><a href="###" >风衣</a></li>
                <li><a href="###" >牛仔裤</a></li>
                <li><a href="###" >西服</a></li>
                <li><a href="###" >卫衣</a></li>
            </ul>
            <h3>鞋包配饰</h3>
            <ul>
                <li><a href="###" >围巾</a></li>
                <li><a href="###" >旅行箱</a></li>
                <li><a href="###" >真皮包</a></li>
                <li><a href="###" >韩版</a></li>
                <li><a href="###" >达芙妮</a></li>
                <li><a href="###" >单肩包</a></li>
                <li><a href="###" >毛线</a></li>
                <li><a href="###" >清仓靴子</a></li>
            </ul>

        </div>


    </div>
    <div id="content-middle">
        <div class="big-img">
            <a href="images/pro_img/blue_one_big.jpg" class="jqzoom" rel="gal1" title="免烫高支棉条纹衬衣">
                <img id="bigImg" src="images/pro_img/blue_one_small.jpg" alt="免烫高支棉条纹衬衣" title="免烫高支棉条纹衬衣">
            </a>
        </div>
        <a class="button thickbox" id="thickImg" title="介绍文字" href="images/pro_img/blue_one_big.jpg">
            <img src="images/look.gif" alt="观看清晰图">
        </a>
        <ul class="small-img">
            <!--蓝色照片-->
            <li class="imgList_blue">
                <a href="###" rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_one_small.jpg',largeimage: 'images/pro_img/blue_one_big.jpg'}">
                    <img src="images/pro_img/blue_one.jpg" alt="">
                </a>
            </li>
            <li class="imgList_blue">
                <a href="###" rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_two_small.jpg',largeimage: 'images/pro_img/blue_two_big.jpg'}">
                    <img src="images/pro_img/blue_two.jpg" alt="">
                </a>
            </li>
            <li class="imgList_blue">
                <a href="###" rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_three_small.jpg',largeimage: 'images/pro_img/blue_three_big.jpg'}">
                    <img src="images/pro_img/blue_three.jpg" alt="">
                </a>
            </li>
            <!--绿色照片-->
            <li class="imgList_green hide">
                <a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/green_one_small.jpg',largeimage: 'images/pro_img/green_one_big.jpg'}">
                    <img src='images/pro_img/green_one.jpg' alt=""/>
                </a>
            </li>
            <li class="imgList_green hide">
                <a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/green_two_small.jpg',largeimage: 'images/pro_img/green_two_big.jpg'}">
                    <img src='images/pro_img/green_two.jpg' alt=""/>
                </a>
            </li>
            <!--黄色照片-->
            <li class="imgList_yellow hide">
                <a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/yellow_one_small.jpg',largeimage: 'images/pro_img/yellow_one_big.jpg'}">
                    <img src='images/pro_img/yellow_one.jpg' alt=""/>
                </a>
            </li>
            <li class="imgList_yellow hide">
                <a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/yellow_two_small.jpg',largeimage: 'images/pro_img/yellow_two_big.jpg'}">
                    <img src='images/pro_img/yellow_two.jpg' alt=""/>
                </a>
            </li>
            <li class="imgList_yellow hide">
                <a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/yellow_three_small.jpg',largeimage: 'images/pro_img/yellow_three_big.jpg'}">
                    <img src='images/pro_img/yellow_three.jpg' alt=""/>
                </a>
            </li>

        </ul>


        <div class="detail-info-title">
            <span class="choosed">产品属性</span>
            <span>产品尺码表</span>
            <span>产品介绍</span>
        </div>

        <div class="detail-info-text">
            <p class="text selected">沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。
                 延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。</p>
            <p class="text">来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、
                温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，
                曲摆的现代人性化裁减，相得益彰，浑然天成。</p>
            <p class="text">世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；
                人性化的4片式后背打褶结构设计提供更舒适的活动空间； 领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；
                醇正天然设计，只为彰显自然荣耀。</p>
        </div>

    </div>
    <div id="content-right-detail">
        <div class="good-detail">
            <h4>免烫高支棉条纹衬衣</h4>
            <ul>
                <li class="message"><p>全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少； 80-100高支双股经纬交织，
                    带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持！</p>
                </li>
                <li>
                    <span>价&#12288;&#12288;格：</span><strong class="before-price">379.00</strong>元
                </li>
                <li>
                    <span>促&#12288;&#12288;销：</span><strong class="new-price">200.00</strong>元
                </li>
                <li class="color-select">
                    <span>颜&#12288;&#12288;色：</span><strong>蓝白</strong>
                </li>
                <li class="demo-color">
                    <a href="###"><img src="images/pro_img/blue.jpg" alt="蓝白"></a>
                    <a href="###"><img src="images/pro_img/yellow.jpg" alt="黄白"></a>
                    <a href="###"><img src="images/pro_img/green.jpg" alt="粉绿"></a>
                </li>
                <li class="size-select">
                    <span>尺&#12288;&#12288;寸：</span><strong>未选择</strong>
                    <ul class="size">
                        <li>S</li>
                        <li>L</li>
                        <li>SL</li>
                        <li>LL</li>
                    </ul>
                </li>
                <li>
                    <span>数&#12288;&#12288;量：</span>
                    <select name="number" id="number">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </li>
                <li class="total" >
                    <span>总&#12288;&#12288;计：</span><strong>200</strong>元
                </li>

            </ul>

        </div>
        <span class="score">给商品评分：</span>
        <ul id="rating-star" class="nostar">
            <li class="one"><a href="###" title="1分">1</a></li>
            <li class="two"><a href="###" title="2分">2</a></li>
            <li class="three"><a href="###" title="3分">3</a></li>
            <li class="four"><a href="###" title="4分">4</a></li>
            <li class="five"><a href="###" title="5分">5</a></li>
        </ul>

        <a href="###" class="shop-car"><img src="images/btn_cart.png" alt=""></a>
    </div>
</div>
<footer id="footer">
    <div id="footer-message">Copyright @ 2018 阿龙哟</div>
</footer>
</body>
</html>